<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>qc</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/vs2015.css">
    <script src="js/highlight.min.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/qc.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="index.html">QC</a>
            </li>
            <li>
                    <a class="font16" href="index.html">首页</a>
                </li>
            <li class="active">
                <a class="font16" href="api.html">API文档</a>
            </li>
            <li>
                <a class="font16" href="module.html">模块化</a>
             </li>
            <li>
                <a class="font16" target="_blank" href="example/">示例</a>
             </li>
        </ul>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <ul id="learn-sider" class="list-group">
                <li data-index="hello" class="list-group-item active">hello word!</li>
                <li data-index="bdsz" class="list-group-item">绑定数组</li>
                <li data-index="bdsj" class="list-group-item">绑定事件</li>
                <li data-index="gxst" class="list-group-item">更新视图</li>
                <li data-index="input" class="list-group-item">form表单</li>
                <li data-index="bdys" class="list-group-item">属性绑定</li>
                <li data-index="arry" class="list-group-item">数组操作</li>
                <li data-index="parent" class="list-group-item">绑定父元素</li>
                 <li data-index="expression" class="list-group-item">表达式与函数调用</li>
                <li data-index="out" class="list-group-item">外面更新视图</li>
                <li data-index="key" class="list-group-item">键盘事件</li>
                <li data-index="event" class="list-group-item">事件参数</li>
                 <li data-index="watch" class="list-group-item">变量监控</li>
                <li data-index="animate" class="list-group-item">自定义动画</li>
                <li data-index="zdysj" class="list-group-item">自定义事件</li>
                <li data-index="widget" class="list-group-item">自定义控件</li>
                <li data-index="api" class="list-group-item">系统常用API</li>
            </ul>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="panel-body" id="txt-code">
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
<script>
    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }
    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }
    function loadcode(id, page, code) {
        $("#" + id).html(htmlEncode(need("$url:code/" + page + "/" + code + "!text")));
    }
    (function () {
        function init(fname, type) {
            var _intTxt = need("$url:code/" + fname + "/index.html!text");
            $("#txt-code").html(_intTxt);
            $("#txt-code").find("pre").each(function (i, block) {
                hljs.highlightBlock(block);
            })
        }

        init("hello", "html");//初始化;
        $("#learn-sider").on("click", ">li", function () {
            if (!$(this).hasClass("active")) {
                $("#learn-sider").find(">li").removeClass("active");
                $(this).addClass("active");
                init($(this).attr("data-index"))
            }
        });
    })();
    hljs.initHighlightingOnLoad();
</script>